<!--车辆管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆维修</span>
    <el-button @click="updeteForm()" type="primary" style="float:right;margin-top:13px;">录入维修车辆</el-button>
  </div>
  <!--  新增车辆弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="送修人">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修车辆">
            <el-select placeholder="请选择" v-model="saveVehicleForm.vehicleId" >
              <el-option  v-for="ws in vehicle" :label= ws.license :value= ws.id></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修项目">
            <el-select placeholder="请选择" v-model="saveVehicleForm.item">
              <el-option label="- 汽车保养" value="30"></el-option>
              <el-option label="- 汽车美容" value="31"></el-option>
              <el-option label="- 钣金喷漆" value="32"></el-option>
              <el-option label="- 四轮定位" value="33"></el-option>
              <el-option label="- 机修" value="34"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修地点">
            <el-select placeholder="请选择" v-model="saveVehicleForm.addr">
              <el-option label="- 沃尔沃专修店" value="20"></el-option>
              <el-option label="- 美奥行汽修" value="21"></el-option>
              <el-option label="- 悦心金峰盛车检汽修" value="22"></el-option>
              <el-option label="- 京昌鑫顺汽修" value="23"></el-option>
              <el-option label="- 美奥行汽修" value="24"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修材料">
            <el-select placeholder="请选择" v-model="saveVehicleForm.material">
              <el-option label="- 汽缸垫进排气歧管垫" value="10"></el-option>
              <el-option label="- 发动机前后悬挂胶垫" value="11"></el-option>
              <el-option label="- 消声器" value="12"></el-option>
              <el-option label="- 气门弹簧" value="13"></el-option>
              <el-option label="- 气门" value="14"></el-option>
              <el-option label="- 止推垫" value="15"></el-option>
              <el-option label="- 大小瓦" value="16"></el-option>
              <el-option label="- 四配套（缸套、活塞、活塞环、活塞销）" value="17"></el-option>
              <el-option label="- 轴承" value="18"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修费用">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.fee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveVehicleForm.repairTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修状态">
            <el-radio label="维修中" value="1" v-model="saveVehicleForm.status"></el-radio>
            <el-radio  label="已完成" value="0" v-model="saveVehicleForm.status"></el-radio>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveVehicle">确定</el-button>
    </template>
  </el-dialog>
  <el-card style="margin:20px;height: 70px;">
    <!--    车辆搜索卡片-->
    <el-form :inline="true">
      <el-form-item label="维修车辆">
        <el-input placeholder="请输入维修车辆车牌号" style="width:220px;
" v-model="searchVehicleForm.license" @keydown.enter="loadVehicle"></el-input>
      </el-form-item>
      <el-form-item label="送修人员" style="width:290px;">
        <el-input placeholder="请输入送修人员姓名" style="width:220px;"
                  v-model=" searchVehicleForm.username" @keydown.enter="loadVehicle"></el-input>
      </el-form-item>
      <el-form-item label="维修状态" style="width:290px;">
        <el-select placeholder="请输入维修状态" style="width:220px;" v-model=" searchVehicleForm.status" @keydown.enter="loadVehicle">
          <el-option label="维修中" value="1"></el-option>
          <el-option label="已完成" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch()">重置</el-button>
        <el-button type="primary" @click="loadVehicle()">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!--  车辆列表-->
  <el-card style="margin:20px;">
    <el-table :data="vehicleArr">
      <el-table-column type="index" label="编号" width="80" align="center" />
      <el-table-column prop="license" label="维修车辆" align="center" />
      <el-table-column prop="item" label="维修项目" align="center" :formatter="itemTypeFormatter"/>
      <el-table-column prop="username" label="送修人员" align="center"/>
      <el-table-column prop="addr" label="维修地点" align="center" :formatter="vehicleTypeFormatter"/>
      <el-table-column prop="repairTime" label="维修时间" align="center"/>
      <el-table-column prop="fee" label="维修费用" align="center"/>
      <el-table-column prop="material" label="维修材料" align="center" :formatter="materialTypeFormatter"/>
      <el-table-column prop="status" label="维修状态" align="center" :formatter="vehicleStatusTypeFormatter"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editVehicle(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="delVehicle(scope.row.id,index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios, {Axios} from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import index from "vuex";

//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('录入维修车辆');
const vehicleArr=ref([]);
const searchVehicleForm =ref({license:'',username:'',status:''});
//加载车辆数据

const loadVehicle=()=>{

  let data=qs.stringify(searchVehicleForm.value);
  if (data===null&&data===''){
    data=null;
  }
  axios.get(BASE_URL+'/v1/VehicleRepair/selectForm?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          vehicleArr.value=response.data.data;
          console.log(vehicleArr.value)
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
onMounted(()=>{
  loadVehicle();
})
//重置车辆搜索信息
const resetSearch=()=>{
  searchVehicleForm.value={username:'',license:'',status:''};
  loadVehicle();
}
const vehicleTypeFormatter=(row,column,cellValue,index)=>{
  if (cellValue==20){
    cellValue='美奥行汽修';
  }else if (cellValue==21){
    cellValue='沃尔沃专修店';
  }else if (cellValue==22){
    cellValue='美奥行汽修';
  }else if (cellValue==23){
    cellValue='悦心金峰盛车检汽修';
  }else if (cellValue==24){
    cellValue='京昌鑫顺汽修';
  }
  return cellValue;


}
const itemTypeFormatter=(row,column,cellValue,index)=>{
  if (cellValue==30){
    cellValue='汽车保养';
  }else if (cellValue==31){
    cellValue='汽车美容';
  }else if (cellValue==32){
    cellValue='钣金喷漆';
  }else if (cellValue==33){
    cellValue='四轮定位';
  }else if (cellValue==34){
    cellValue='机修';
  }
  return cellValue;


}
const materialTypeFormatter=(row,column,cellValue,index)=>{
  if (cellValue==10){
    cellValue='汽缸垫进排气歧管垫';
  }else if (cellValue==11){
    cellValue='发动机前后悬挂胶垫';
  }else if (cellValue==12){
    cellValue='板簧胶套';
  }else if (cellValue==13){
    cellValue='消声器';
  }else if (cellValue==14){
    cellValue='气门弹簧';
  }else if (cellValue==15){
    cellValue='气门';
  }else if (cellValue==16){
    cellValue='止推垫';
  }else if (cellValue==17){
    cellValue='大小瓦';
  }else if (cellValue==18){
    cellValue='四配套（缸套、活塞、活塞环、活塞销）';
  }else if (cellValue==19){
    cellValue='轴承';
  }
  return cellValue;


}


const vehicleStatusTypeFormatter=(row,column,cellValue,index)=>{
  if (cellValue==1){
    cellValue='维修中';
  }else if (cellValue==0){
    cellValue='已完成';
  }
  return cellValue;
}
const  saveVehicleForm=ref({
  username:'',
  vehicleId:'',
  item:'',
  addr:'',
  material:'',
  fee:'',
  status:'',
  repairTime:'',
  userId:'',
  license:''

})
const vehicle=ref([]);
let user=getUser();


const updeteForm =()=>{
  dialogVisible.value=true;
  axios.get(BASE_URL+'/v1/VehicleRepair/selectlicense')
      .then((response)=>{
        if (response.data.code==2000){
          vehicle.value=response.data.data;
        }else {
          ElMessage.error("请求数据异常")
        }

      })
}
const saveVehicle =()=>{
  saveVehicleForm.value.userId=user.id;
  let data =qs.stringify(saveVehicleForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/VehicleRepair/insertForm',data)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('操作成功');
          dialogVisible.value=false;
          saveVehicleForm.value={};
          loadVehicle();

        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
const handleClose =()=>{
  if(confirm("确定吗")){
    dialogVisible.value=false;
    saveVehicleForm.value={};
  }
}
const editVehicle=(id)=>{
  updeteForm();
  dialogVisible.value=true
  dialogTitle.value='编辑车辆';
  axios.get(BASE_URL+'/v1/VehicleRepair/selectForm?id='+id)
      .then((response)=>{
        if (response.data.code==2000){
          console.log(response.data.data[0]);
          saveVehicleForm.value=response.data.data[0];
        }else {
          ElMessage.error(response.data.msg);
        }
      })

}
const delVehicle=(id,index)=>{
  if (confirm('您确定删除吗')){
    axios.post(BASE_URL+'/v1/VehicleRepair/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            vehicleArr.value.splice(index);
            ElMessage.success('删除成功')
            loadVehicle();
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }
}



</script>